import React, { useCallback } from 'react';
import { useThemeStore } from '../../stores/themeStore';
import { getTheme } from '../../theme/config';
import './customComponents.css';

interface CustomCardProps {
  children: React.ReactNode;
  className?: string;
  hoverable?: boolean;
  bordered?: boolean;
  size?: 'small' | 'default' | 'large';
  onClick?: () => void;
  style?: React.CSSProperties;
}

const CustomCard: React.FC<CustomCardProps> = ({ 
  children, 
  className = '',
  hoverable = false,
  bordered = true,
  size = 'default',
  onClick,
  style
}) => {
  const { mode } = useThemeStore();
  const theme = getTheme(mode);

  // 使用 useCallback 优化事件处理函数
  const handleClick = useCallback(() => {
    if (onClick) {
      onClick();
    }
  }, [onClick]);

  // Determine card classes
  const getCardClasses = () => {
    const classes = ['custom-card', size];
    
    if (bordered) {
      classes.push('bordered');
    }
    
    if (hoverable) {
      classes.push('hoverable');
    }
    
    if (className) {
      classes.push(className);
    }
    
    return classes.join(' ');
  };

  // 根据用户主题偏好调整阴影效果
  const getCardShadow = () => {
    if (mode === 'dark') {
      // 深色主题下调整阴影颜色和透明度，避免过强的阴影造成视觉突兀
      return '0 8px 32px rgba(0, 0, 0, 0.3)';
    } else {
      // 浅色主题下增加阴影效果，避免与背景融合
      return '0 4px 12px rgba(0, 0, 0, 0.08)';
    }
  };

  const getHoverShadow = () => {
    if (mode === 'dark') {
      // 深色主题下调整悬停阴影
      return '0 12px 40px rgba(0, 0, 0, 0.4)';
    } else {
      // 浅色主题下增强悬停阴影
      return '0 8px 24px rgba(0, 0, 0, 0.12)';
    }
  };

  return (
    <div
      className={getCardClasses()}
      style={{
        background: theme.cardBackground,
        border: bordered ? `1px solid ${theme.cardBorder}` : 'none',
        boxShadow: getCardShadow(),
        ...style
      }}
      onMouseEnter={hoverable ? (e) => {
        e.currentTarget.style.boxShadow = getHoverShadow();
        e.currentTarget.style.transform = 'translateY(-2px)';
      } : undefined}
      onMouseLeave={hoverable ? (e) => {
        e.currentTarget.style.boxShadow = getCardShadow();
        e.currentTarget.style.transform = 'translateY(0)';
      } : undefined}
      onClick={handleClick}
    >
      {children}
    </div>
  );
};

export default CustomCard;